<template>
    <div class="page">
        <button @click="localpage--" :disabled="localpage <= 1">&lt;</button>
        <button v-for="p in totalpage" :class="{active:p==localpage}" @click="localpage=p">{{ p }}</button>
        <button @click="localpage++" :disabled="localpage >= totalpage">&gt;</button>
    </div>
</template>

<script>
export default {
    data(){
        return{
            localpage:this.page
        }
    },
    props:{
        page:{
            type:Number,
            default:1
        },
        pageSize:{
            type:Number,
            default:10
        },
        total:Number,
        pageCount:Number,
    },
    computed:{
        totalpage(){
            return this.pageCount || Math.ceil(this.total/this.pageSize)
        }
    },
    watch:{
        page(newval){
            this.localpage = newval
        },
        localpage(newval){
            this.$emit('change',newval)
        }
        
    }
    
}
</script>

<style>
.page .active{
color: red;
}
</style>